<template>
	<div class="table-container">
		<u-cell-group>
			<u-cell-item title="任务类型" :value="taskTypeStr" :arrow="false" :border-bottom="false"></u-cell-item>
			<u-cell-item title="派遣医院" :value="detailInfos.orgName" :arrow="false" :border-bottom="false"></u-cell-item>
			<u-cell-item title="派遣日期" :value="detailInfos.appointDate" :arrow="false"
				:border-bottom="false"></u-cell-item>
			<u-cell-item title="起始时间" :value="detailInfos.startDate" :arrow="false"
				:border-bottom="false"></u-cell-item>
			<u-cell-item title="结束时间" :value="detailInfos.endDate" :arrow="false" :border-bottom="false"></u-cell-item>
			<u-cell-item title="病人名称" :value="detailInfos.informPatient" :arrow="false" :border-bottom="false"></u-cell-item>
			<u-cell-item title="联系电话" :value="detailInfos.patientTel" :arrow="false" :border-bottom="false"></u-cell-item>
			<u-cell-item title="任务状态" :value="detailInfos.taskStatus" :arrow="false"></u-cell-item>
		</u-cell-group>

		<view :class=" detailInfos.taskStatus == '待执行' ? 'notNotified' : 'alreadyNotified' " @click="clickOnNotifiedView" >
			{{ getCurrentNotificationStatus(detailInfos.taskStatus) }}</view>

		<!-- <z-paging default-page-no="1" :auto="false" default-page-size="10" :fixed="false"
			:paging-style="{height:'95vh'}" ref="paging" v-model="tdList" @query="queryNotificationTaskFromPeopel">
			<div class="table-wrapper">
				<table class="table">
					<thead class="thead">
						<tr class="t_header">
							<th class="t_header_th" v-for="item in thList" :key="item.id">{{ item.name }}</th>
						</tr>
					</thead>
					<tbody>
						<tr class="t_body" v-for="item in tdList" :key="item.id" @click="clickOnNotifiedView(item)">
							<td class="table_td">{{ item.rowNum }}</td>
							<td class="table_td">{{ item.patientName }}</td>
							<td class="table_td">{{ item.patientTel }}</td>
							<td class="table_td">
								<view :class=" item.informStatus == '1' ? 'alreadyNotified' : 'notNotified' ">
									{{ getCurrentNotificationStatus(item.informStatus) }}</view>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</z-paging> -->
	</div>
	<view class="footer_view">
		<ym-footer></ym-footer>
	</view>
</template>


<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getAppointTaskDetail,
		getAppointPatientList,
		changeModifyInformStatus
	} from '../../apis/api.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const noticaInfo = ref()
	const paging = ref()

	const taskTypeStr = ref("通知任务")
	const detailInfos = ref({
		// workType: '初筛任务',
		// pqHospital: 'xx医院',
		// pqTime: '2024-06-19',
		// startTime: '18:30',
		// endTime: '18:30',
		// totalNum: 20,
		// status: '已结束'
	})
	const thList = ref([{
		name: '编号',
		id: 1
	}, {
		name: '病人姓名',
		id: 2
	}, {

		name: '联系电话',
		id: 3
	}, {
		name: '',
		id: 4
	}, ])
	const tdList = ref([
		// rowNum: 1,
		// patientName: '初筛任务',
		// patientTel: '12345678998',
		// informStatus: '通知',
		// patientId: ''
	])

	onLoad((e) => {
		console.log('通知任务' + e)
		noticaInfo.value = e
	})

	onMounted(() => {
		console.log('通知任务' + '只会执行一次，做最开始的网络请求')
		queryNotificationTaskInfo()
	})

	const queryNotificationTaskInfo = async () => {
		try {
			let res = await getAppointTaskDetail({
				docCode: noticaInfo.value.docCode,
				orgCode: noticaInfo.value.orgCode,
				patientSiftId: noticaInfo.value.patientSiftId
			})
			console.log(res.data)
			detailInfos.value = res.data
			getCurrentTaskTypeString(detailInfos.value.taskType)
			// queryNotificationTaskFromPeopel(1, 10)
		} catch (e) {
			uni.showToast({
				title: '网络请求失败',
				icon: 'error'
			})
		}
	}

	// const queryNotificationTaskFromPeopel = async (pageNo, pageSize) => {
	// 	try {
	// 		let res = await getAppointPatientList({
	// 			docCode: noticaInfo.value.docCode,
	// 			orgCode: noticaInfo.value.orgCode,
	// 			projectId: noticaInfo.value.projectId,
	// 			pageSize: pageSize,
	// 			pageNo: pageNo
	// 		})
	// 		paging.value.complete(res.data.rows)
	// 	} catch (e) {
	// 		uni.showToast({
	// 			title: '网络请求失败',
	// 			icon: 'error'
	// 		})
	// 		paging.value.complete(false)
	// 	}
	// }

	const getCurrentTaskTypeString = (type) => {
		taskTypeStr.value = type == '1' ? '通知任务' : '未知'
	}
	
	const getCurrentNotificationStatus = (status) => {
		let str = status == '待执行' ? '通知' : '已通知'
		return str
	} 

	const clickOnNotifiedView = async () => {
		if (detailInfos.taskStatus != '已结束') {
			try{
				let res = await changeModifyInformStatus({
					patientId: detailInfos.value.patientId,
					informStatus: '1'
				})
				uni.showToast({
					title: "已通知",
					icon: 'success'
				})
				detailInfos.value.taskStatus = '已结束'
			}catch(e){
				uni.showToast({
					title: e.message,
					icon: 'error'
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-cell {
		padding: 14rpx 32rpx !important;
	}

	::v-deep .u-cell_title {
		font-size: 28rpx !important;
		color: #4E5969 !important;
	}

	::v-deep .u-cell__value {
		color: #1D2129 !important;
		font-size: 28rpx !important;
	}

	.table {
		border-bottom: none;
		border-radius: 16rpx;
		width: 96%;
		margin: 24rpx auto;
		font-size: 24rpx;
		text-align: center;

		.thead {
			position: sticky;
			top: 0;
			background-color: white;
			z-index: 1000;
			/*#ifdef H5*/
			top: 44px;
			/*#endif*/
		}

		.t_header {
			display: flex;
			// justify-content: space-around;
			height: 80rpx;
			align-items: center;
			background: #E5E6EB;
			font-weight: bold;

			.t_header_th:nth-child(1) {
				width: 15%;
				// padding-left: 32rpx;
			}

			.t_header_th:nth-child(2) {
				width: 30%;
			}

			.t_header_th:nth-child(3) {
				width: 40%;
			}

			.t_header_th:nth-child(4) {
				width: 15%;
			}

		}

		.t_body {
			display: flex;
			height: 80rpx;
			align-items: center;
			border-bottom: 2rpx solid #E5E6EB;

			.table_td:nth-child(1) {
				width: 15%;
				// padding-left: 32rpx;
			}

			.table_td:nth-child(2) {
				width: 30%;
			}

			.table_td:nth-child(3) {
				width: 40%;
			}

			.table_td:nth-child(4) {
				width: 15%;

				
			}

			.table_active {
				width: 20%;
				color: #0FC6C2;
			}
		}
	}

	.alreadyNotified {
		width: 622rpx;
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 50%;
		bottom: 180rpx;
		transform: translateX(-50%);
		
		border-radius: 40rpx;
		color: #fff;
		background-color: #C9CDD4;
		font-size: 24rpx;
		line-height: 52rpx;
		text-align: center;
	}
	
	.notNotified {
		width: 622rpx;
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 50%;
		bottom: 180rpx;
		transform: translateX(-50%);
		
		border-radius: 40rpx;
		color: #fff;
		background-color: #0FC6C2;
		font-size: 24rpx;
		line-height: 52rpx;
		text-align: center;
	}
	.footer_view {
		position: absolute;
		bottom: 10rpx;
		width: 100%;
	}
</style>